<template>
  <view class="category">
    <!-- 搜索框 -->
    <YgSearch></YgSearch>
    <!-- 内容 -->
    <view class="content">
      <view class="left">
        <view
          :class="currentindex === index ? 'title-item active' : 'title-item'"
          v-for="(item, index) in titles"
          :key="item"
          @click="handMenuSelect(index)"
          >{{ item }}</view
        >
      </view>
      <scroll-view class="right" scroll-y scroll-top="scrollTop">
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-title"> /{{ item1.cat_name }}/ </view>
          <view class="goods-list">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
            >
              <image :src="item2.cat_icon" mode="widthFix" />
              <view class="goods-subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// 全局大数组
let categories = [];
export default {
  data() {
    return {
      // 左侧数组
      titles: [],
      //   右侧内容
      goods: {},
      //   选中左侧内容
      currentindex: 0,
      //   右侧内容 滚动距离
      scrollTop: 0,
    };
  },
  //   分类数据
  async onLoad() {
    const res = await this.$u.get("/categories");
    console.log(res);
    categories = res.message;
    this.titles = categories.map((v) => v.cat_name);
    this.goods = categories[0].children;
  },
  methods: {
    handMenuSelect(index) {
      this.currentindex = index;
      this.goods = categories[index].children;
      //   设置右侧滚动为零置顶
      this.scrollTop =
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random() *
        Math.random();
    },
  },
};
</script>
<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: hidden;
  display: flex;
  .left {
    width: 180rpx;
    overflow: auto;
    .title-item {
      height: 80rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: $themColor;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 5rpx;
        height: 80%;
        background-color: $themColor;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .right {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-title {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
      }
      .goods-list {
        display: flex;
        flex-wrap: wrap;

        navigator {
          width: 33.3%;
          text-align: center;
          image {
            width: 60%;
          }

          .goods-subtitle {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>